<template>
    <div class="cxy-select">
        <div class="cxy-select-title">{{ title }}</div>
        <div class="cxy-select-box">
            <el-select size="small" v-model="value" :multiple="multiple" filterable placeholder="请选择" clearable
                collapse-tags @change="change">
                <el-option v-for="item in data || options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
    </div>

</template>
<script>
/**
 * 日期
 * @created 2024-03-25
 * @param {Boolean} multiple 多选/单选
 * @param {Array} data  选项数据
 * @param {String} title  前面标题
 * @param {String} defaultValue  默认选项值
 * @author Xuyun
 */
export default {
    name: 'cxySelect',
    props: {
        multiple: {
            type: Boolean,
            default: false
        },
        data: {
            type: Array
        },
        title: {
            type: String,
            default: "标题"
        },
        defaultValue: {
            type: String
        }
    },
    data() {
        return {
            options: [{
                value: 'HTML',
                label: 'HTML'
            },{
                value: 'java',
                label: 'java'
            },{
                value: 'php',
                label: 'php'
            }],
            value: null,
        }
    },
    watch: {
        value: {
            handler(newValue, oldValue) {
                console.log(`数组已更改：${oldValue} -> ${newValue}`);
            },
            deep: true
        },
        // data: {
        //     handler(newValue, oldValue) {
        //         this.data.forEach(element => {

        //         });
        //     },
        //     deep: true 
        // }
    },
    created() {
        this.value = this.defaultValue; // 默认值
    },
    methods: {
        change(e) {
            console.log(e)
            this.$emit('handleSlect', e)
        }
    }
}
</script>

<style scoped>
.cxy-select {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cxy-select-title {
    font-size: 14px;
    font-family: Microsoft YaHei;
}
</style>